import PropTypes from 'prop-types';
// import classnames from 'classnames';
import React from 'react';
import css from './index.less';

import xuan1 from 'assert/img/otherImgs/111.png';
import xuan2 from 'assert/img/otherImgs/222.png';
import xuan3 from 'assert/img/otherImgs/333.png';
import xuan4 from 'assert/img/otherImgs/444.png';
import xuan5 from 'assert/img/otherImgs/555.png';
import xuan6 from 'assert/img/otherImgs/666.png';
import xuan7 from 'assert/img/otherImgs/777.png';
import xuan8 from 'assert/img/otherImgs/888.png';

export default class RenderClass extends React.Component {

  static propTypes = {
    slideData: PropTypes.array.isRequired,

  };

  static defaultProps = {
    slideData: [
      {
        imgUrl: xuan1,
        id: '550115461867',
      },
      {
        imgUrl: xuan2,
        id: '550177067299',
      },
      {
        imgUrl: xuan3,
        id: '550117381806',
      },
      {
        imgUrl: xuan4,
        id: '551204288736',
      },
      {
        imgUrl: xuan5,
        id: '550113341486',
      },
      {
        imgUrl: xuan6,
        id: '565315404571',
      },
      {
        imgUrl: xuan7,
        id: '550137718457',
      },
      {
        imgUrl: xuan8,
        id: '550177575853',
      }
    ],

  };


  constructor(props) {
    super(props);
    this.state = {
      active: 0,
    };



    // console.log('this.itemDetail', this.itemDetail);
  }

  componentDidMount() {

    this.newSwiper();
    // this.closeRef.current.addEventListener('touchstart', this.onClearTimer, false);
  }

  componentWillUnmount() {

  }

  // stopPlay = () => {
  //   console.log(222);
  //   this.swiper.autoplay.stop();
  // };

  newSwiper = () => {
    const that = this;
    this.swiper = new Swiper('.swiper1', {
      loop: true,
      grabCursor: true,
      // initialSlide: 0,
      centeredSlides: true,
      slidesPerView: 'auto',
      speed: 2500,
      autoplay: {  // 组件卸载后会继续执行定时器
        delay: 3000,
        disableOnInteraction: false,
        waitForTransition: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        bulletClass: 'my-bullet',
        bulletActiveClass: 'my-bullet-active',
      },
      effect : 'cube',
      cubeEffect: {
        slideShadows: true,
        shadow: true,
        shadowOffset: 100,
        shadowScale: 0.6
      },
      on: {
        slideChange: function() {
          let { activeIndex } = this;
          const { active } = that;
          if (active !== activeIndex) {
            if (activeIndex === 9) activeIndex = 1;
            if (activeIndex === 0) activeIndex = 8; // 切换时图片1的active是1
            that.setState({
              active: activeIndex
            });
          }
        },
      }
    });
  };



  render() {

    const {slideData = [], getId = () => {}} = this.props;

    return (
      <div onClick={ () => getId(this.state.active)}>
        <div className="swiper-container swiper1">
          <div className="swiper-wrapper">
            {
              slideData.map((item, index) => {
                const props = {
                  key: index,
                  className: 'swiper-slide',
                  src: item.imgUrl,
                };
                return <img {...props} />;
              })
            }
          </div>
          <div className={'swiper-pagination'}/>
        </div>
      </div>
    );
  }
}
